import React, { useState, useEffect } from "react";
import instance from "../../api/instance";
import { useParams } from "react-router-dom";
import { qie } from "../../store/city";
import { Button, Card, Toast, IndexBar, List, Tag } from "antd-mobile";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
function Index() {
  let nav = useNavigate();
  const dispatch = useDispatch();
  let { type } = useParams();
  let [list, setlist] = useState([]);
  let [howlist, sethowlist] = useState([]);
  let xr = async () => {
    const res = await instance.get("/api/city");
    console.log(res);
    const { data, code } = res.data;
    setlist(data.city);
    sethowlist(data.hotCities);
  };
  useEffect(() => {
    xr();
  }, []);
  const qh = (city) => {
    dispatch(qie({ type, city }));
    console.log(type, city);

    nav("/");
  };
  return (
    <div>
      <Card title="热门城市">
        <List>
          {howlist.map((item, index) => (
            <Tag key={index} onClick={() => qh(item.name)}>
              {item.name}
            </Tag>
          ))}
        </List>
      </Card>
      <Card title="城市选择">
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {list.map((group) => {
              const { initial, list } = group;
              return (
                <IndexBar.Panel
                  index={initial}
                  title={`${initial}`}
                  key={`${initial}`}
                >
                  <List>
                    {list.map((item, index) => (
                      <List.Item key={index} onClick={() => qh(item.name)}>
                        {item.name}
                      </List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  );
}

export default Index;
